import React, { Component } from 'react'
import { connect } from 'umi'
import { Table,Avatar  } from 'antd'
import { MyBreadcrumb } from '@/components/myBreadcrumb/index'

    // "userid": "user_e239b09f-bce2-4434-baed-fc33309aa857",
    //         "username": "",
    //         "password": "ba781edcd4de6958992bc62cd061a1c2",
    //         "tel": "18813007814",
    //         "telcode": "49888",
    //         "email": "",
    //         "nickname": "123123",
    //         "qq": "",
    //         "wx": "",
    //         "avatar": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3358008061,4231540853&fm=26&gp=0.jpg",
    //         "sex": -1,
    //         "birthday": ""


class user extends Component {
    constructor(props:any){
        super(props)
    }
    state={
        userList:[]
    }
    componentDidMount(){
        this.props.dispatch({
            type:'people/getuserList'
        })
    }
    render() {
    let height = 0
    let width = 0
    const h = document.getElementsByTagName('html')
    height = h[0].clientHeight
    width = h[0].clientWidth
    const { userList, dispatch } = this.props
    const columns:any = [
            {
              title: '用户头像',
              align: 'center',
              dataIndex: 'avatar',
              key: 'avatar',
                ellipsis: true,
                width: 100,
                render(text:any){
                    return (
                        <div>
                        <Avatar size="large" src={ text } />
                    </div>
                    )
                    
                }
            },
            {
              title: '用户名称',
              align: 'center',
              dataIndex: 'username',
              key: 'username',
                ellipsis: true,
                width: 100,
            },
            {
                title: '昵称',
                align: 'center',
                dataIndex: 'nickname',
                ellipsis: true,
                key: 'nickname',
                width: 80,
            },
            {
              title: '性别',
              align: 'center',
              dataIndex: 'sex',
              key: 'sex',
                ellipsis: true,
                width: 80,
                render(text:any){
                    return (
                        <div>
                            {text === -1 ? '男' : '女'}
                        </div>
                    )
                }
            },
            {
              title: '密码(MD5加密)',
              align: 'center',
              dataIndex: 'password',
              key: 'password',
                ellipsis: true,
                width: 150,
            },
            {
              title: '手机号',
              align: 'center',
              dataIndex: 'tel',
              key: 'tel',
                ellipsis: true,
                width: 130,
            },
            {
                title: '手机码',
                align: 'center',
                dataIndex: 'telcode',
                ellipsis: true,
                key: 'telcode',
                width: 80,
            },
            {
                title: '邮箱',
                align: 'center',
                dataIndex: 'email',
                ellipsis: true,
                key: 'email',
                width: 130,
            },
            {
                title: 'qq',
                align: 'center',
                dataIndex: 'qq',
                ellipsis: true,
                key: 'qq',
                width: 80,
            },
            {
                title: 'wx',
                align: 'center',
                dataIndex: 'wx',
                ellipsis: true,
                key: 'wx',
                width: 80,
            },
            {
                title: '生日',
                align: 'center',
                dataIndex: 'birthday',
                ellipsis: true,
                key: 'birthday',
                width: 80,
            },
            
          ];
        return (
            <div>
                <MyBreadcrumb />
                <Table dataSource={userList} columns={columns} rowKey="userid" scroll={{ x: 1300, y: height * 0.62 }}/>; 
            </div>
        )
    }
}
export default connect(state=>{
    return {
        userList: state.people.userList
    }
})(user)